<template>
	<el-form ref="loginFormRel" :model="params" :rules="loginFormRules" size="large" class="login-content-form">
		<el-form-item class="login-animation2" prop="username">
			<el-input type="text" placeholder="用户名" v-model="params.username" clearable autocomplete="off">
				<template #prefix>
					<el-icon class="el-input__icon">
						<ele-User />
					</el-icon>
				</template>
			</el-input>
		</el-form-item>
		<el-form-item class="login-animation2" prop="password">
			<el-input :type="isShowPassword ? 'text' : 'password'" placeholder="密码" v-model="params.password"
				autocomplete="off">
				<template #prefix>
					<el-icon class="el-input__icon">
						<ele-Unlock />
					</el-icon>
				</template>
				<template #suffix>
					<i class="iconfont el-input__icon login-content-password"
						:class="isShowPassword ? 'icon-yincangmima' : 'icon-xianshimima'"
						@click="isShowPassword = !isShowPassword">
					</i>
				</template>
			</el-input>
		</el-form-item>
		<el-form-item class="login-animation3" prop="captcha">
			<el-row :gutter="2">
				<el-col :span="16">
					<el-input type="text" maxlength="5" placeholder="请输入验证码" v-model="params.captcha" clearable
						autocomplete="off">
						<template #prefix>
							<el-icon class="el-input__icon">
								<ele-Position />
							</el-icon>
						</template>
					</el-input>
				</el-col>
				<el-col :span="6" :offset="1">
					<el-image class="login-content-code" :src="captchaImage" :fit="'contain'" @click="onCaptcha()" />
				</el-col>
			</el-row>
		</el-form-item>
		<el-form-item class="login-animation4">
			<el-button type="primary" class="login-content-submit" round @click="onLogin()" :loading="loading">
				<span>登 录</span>
			</el-button>
		</el-form-item>
	</el-form>
</template>

<script lang="ts">
import { toRefs, reactive, defineComponent, ref, onMounted } from 'vue';
import type { FormInstance, FormRules } from 'element-plus'
import { useRoute, useRouter } from 'vue-router';
import { validateForm, handleLogin, handleCaptcha } from '../login-wrap';
import CONSTANTS from '/@/enums/global-constant-enum';
import MESSAGE from '/@/enums/message-enum';

export default defineComponent({
	name: 'loginAccount',
	setup() {
		const route = useRoute();
		const router = useRouter();
		const dataMap = reactive({
			isShowPassword: false,
			loading: false,
			captchaImage: '1234',
			params: {
				username: '',
				password: '',
				sign: '',
				captcha: '',
				loginType: 'employee',
			},

		});
		const loginFormRules = ref<FormRules>({
			username: [
				{ required: true, message: '账号不能为空', trigger: 'change' }
			],
			password: [
				{ required: true, message: '密码不能为空', trigger: 'change' }
			],
			captcha: [
				{ required: true, message: '验证码不能为空', trigger: 'change' }
			]
		});
		const loginFormRel = ref<FormInstance>();
		const onLogin = async () => {
			let result = await validateForm(loginFormRel.value);
			if (!result) {
				return;
			}
			await handleLogin(dataMap.loading, dataMap.params);
			// 登录成功，跳到转首页
			// 如果是复制粘贴的路径，非首页/登录页，那么登录成功后重定向到对应的路径中
			if (route.query?.redirect) {
				router.push({
					path: <string>route.query?.redirect,
					query: Object.keys(<string>route.query?.params).length > 0 ? JSON.parse(<string>route.query?.params) : '',
				});
			} else {
				router.push(CONSTANTS.HOME_PAGE_NAME);
			}
		};
		const onCaptcha = async () =>{
			let response = await handleCaptcha(90, 30);
			const {code, data} = response;
			if(code === MESSAGE.OK) {
				dataMap.params.sign = data.sign as string;
				dataMap.captchaImage = 'data:image/jpeg;base64,' + data.image;
			}
		};
		onMounted(async()=>{
			onCaptcha();
		});
		return {
			onLogin,
			onCaptcha,
			...toRefs(dataMap),
			loginFormRel,
			loginFormRules,
		};
	},
});
</script>

<style scoped lang="scss">
@import '/@/views/login/account.scss';
</style>
